// 目标：如果我有一个树状结构的组件结构，祖父孙，如何解决嵌套过多层，导致父子组件之间传递状态、方法困难的问题？
// useContext可以让你读取和订阅组件中的 context。
// useContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。设计的目的就是解决组件树间数据传递的问题。
// 步骤：
// 1.想要使用上下文，前提是创建上下文  const MyThemeContext = React.createContext(SomeContext);
// 2.使用上下文，传递什么内容 const value = useContext(MyThemeContext)
// 3.通过切换主题样式案例体验传递状态和方法

import { Button, Divider } from 'antd';
import React, { useContext, useState } from 'react';

interface IThemeContext {
  theme: string;
  setTheme: (theme: string) => void;
  // toggleTheme: (theme: string) => void;
}

// 1.创建全局的上下文（注意编写位置和上下文类型）
const MyThemeContext = React.createContext<IThemeContext>({} as IThemeContext);

const Child = () => {
  const themeContext = useContext(MyThemeContext);
  console.log(themeContext, 'Child');
  const style = {
    backgroundColor: themeContext.theme === 'dark' ? 'black' : 'white',
    color: themeContext.theme === 'dark' ? 'white' : 'black',
    padding: '2rem',
    border: '1px solid gray',
  };
  return (
    <>
      <div style={style}>
        <Button onClick={() => themeContext.setTheme(themeContext.theme === 'dark' ? 'light' : 'dark')}>使用祖组件传递的方法切换主题</Button>
        <h4>孙组件</h4>
      </div>
    </>
  );
};

const Parent = () => {
  const themeContext = useContext(MyThemeContext);
  console.log(themeContext, 'Parent');
  const style = {
    backgroundColor: themeContext.theme === 'dark' ? 'black' : 'white',
    color: themeContext.theme === 'dark' ? 'white' : 'black',
    padding: '2rem',
    border: '1px solid gray',
  };
  return (
    <>
      <div>
        <div style={style}>
          <h3>父组件</h3>
        </div>
        <Divider />
        <Child />
      </div>
    </>
  );
};

const App = () => {
  const [theme, setTheme] = useState('dark');
  //   const toggleTheme = () => {
  //     setTheme(theme === 'dark' ? 'light': 'dark')
  // }

  return (
    <>
      <h2>顶层祖组件</h2>
      {/* <Button onClick={toggleTheme}>切换主题</Button> */}
      <Button
        onClick={() => {
          setTheme(theme === 'dark' ? 'light' : 'dark');
        }}
      >
        切换主题
      </Button>
      <MyThemeContext.Provider
        value={{
          theme,
          setTheme,
        }}
      >
        <Parent />
      </MyThemeContext.Provider>
      {/* v19版本可以直接不用.Provider 不知道为什么我这里报类型错误 */}
      {/* <MyThemeContext
        value={{
          theme,
          toggleTheme: setTheme,
        }}
      >
        <Parent />
      </MyThemeContext> */}
    </>
  );
};

export default App;
